<template>
  <div class="container">
    <header>平台总数据</header>
    <el-form :model="queryForm"
             label-width="100px"
             :inline="true"
             class="demo-ruleForm">
      <el-form-item label="活动列表">
        <el-select v-model="queryForm.activityId"
                   @change="querySelectChange"
                   clearable
                   placeholder="请选择活动">
          <el-option v-for="item in activityArr"
                     :label="item.name"
                     :value="item.id"
                     :key="item.id">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="searchData">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table border
                align="center"
                header-align="center"
                tooltip-effect="dark"
                :data="tableData"
                width="100%"
                style="text-align: center;">
        <el-table-column type="index"
                         width="50"></el-table-column>
        <el-table-column width="50px"
                         prop="activityId"
                         label="id"></el-table-column>
        <el-table-column min-width="200px"
                         prop="activityName"
                         label="活动名称"></el-table-column>
        <el-table-column prop="pv"
                         width="150"
                         label="页面点击次数（pv）"></el-table-column>
        <el-table-column prop="uv"
                         width="150"
                         label="页面点击次数（uv）"></el-table-column>
        <el-table-column prop="totalTimes"
                         width="120"
                         label="活动参与次数"></el-table-column>
        <el-table-column prop="totalPeople"
                         label="活动参与总人数"
                         width="120"></el-table-column>
        <el-table-column prop="consumeScore"
                         label="消耗积分数"
                         width="120"></el-table-column>
        <el-table-column prop="countBill"
                         label="奖励积分下发数"
                         width="120"></el-table-column>
        <el-table-column min-width="200px"
                         fixed="right"
                         label="操作">
          <template slot-scope="scope">
            <el-button class="pan-btn red-btn"
                       @click="showDetail(scope.row, scope.$index)">详情</el-button>
            <el-button class="pan-btn green-btn"
                       @click="exportHandle(scope.row, scope.$index)">导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination layout="prev, pager, next, jumper"
                     :page-size='10'
                     :total="total"
                     :current-page.sync="currentPageNum"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Total',
  data() {
    return {
      queryForm: {
        activityId: ''
      },
      tableData: [],
      total: 1,
      currentPageNum: 1,
      pageSize: 10,
      pageNum: 0,
      activityArr: []
    }
  },
  mounted() {
    this.getActivityList()
    this.search(0)
  },
  watch: {
    pageNum() {
      this.currentPageNum = this.pageNum + 1
    }
  },
  methods: {
    querySelectChange() {
      this.pageNum = 0
    },
    searchData() {
      this.search('0')
    },
    getActivityList() {
      const _this = this
      _this.axios({
        url: '/activityConsole/data-statists/get-activitys'
      }).then(res => {
        _this.activityArr = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    search(page) {
      console.log(this.queryForm.activityId)
      const that = this
      that.axios.get('/activityConsole/data-statists/get-data', {
        params: {
          pageNum: page || that.pageNum,
          pageSize: that.pageSize,
          activityId: that.queryForm.activityId
        }
      }).then(function(res) {
        console.log(res.data)
        if (res.data.status == 'ERROR' && res.data.description == '您没有查询数据的权限') {
          that.$alert('您没有查询数据的权限', '权限不足提醒', {
            confirmButtonText: '确定',
            callback: function(action) {
              that.$message({
                type: 'error',
                message: '权限不足'
              })
            }
          })
          that.$router.push('/')
        } else {
          if (res.data.status == '200') {
            that.tableData = res.data.data
            that.total = parseInt(res.data.description)
          }
        }
      }).catch(function(error) {
        console.log(error)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pageNum = parseInt(val) - 1
      this.search()
    },
    showDetail(item, index) {
      this.$router.push({ path: 'DayData', query: { activityId: item.activityId }})
    },
    exportHandle(item, index) {
      window.location.href = '/activityConsole/data-statists/export-day-data?activityId=' + item.activityId
    }
  }
}
</script>
<style scoped>
header {
  margin-bottom: 10px;
}

.footer {
  margin-top: 10px;
  text-align: center;
}
</style>
